<template>
  <div class="page-container">
    <div class="login-container">
      <el-form
        :model="formUser"
        label-position="right"
        label-width="100px"
        class="rounded-form"
      >
        <el-form-item label="用户名:" class="right-align-form">
          <el-input v-model="formUser.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码:" class="right-align-form">
          <el-input type="password" v-model="formUser.userPassword"></el-input>
        </el-form-item>
      </el-form>
      <div class="centered-button">
        <el-button type="primary" @click="login">登录</el-button>
        <!-- <el-button @click="searykdl" type="primary">游客登录</el-button> -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
} from "vue";
import { ElTable, TableColumnCtx } from "element-plus";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import { ElButton, ElDialog, dialogEmits, ElMessage } from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../axios/axiosInstance";
import Cookies from "js-cookie";
// 日期中文
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
const router = useRouter();

const sessionClear = () => {
  Cookies.remove("userName");
  localStorage.clear();
  sessionStorage.clear();
};
sessionClear();
const formUser = ref({
  userName: "",
  userPassword: "",
});

const login = () => {
  if (!formUser.value.userName) {
    ElMessage.error({
      message: "请输入用户名!",
      center: true,
    });
    return;
  }
  if (!formUser.value.userPassword) {
    ElMessage.error({
      message: "请输入密码!",
      center: true,
    });
    return;
  }

  axios({
    url: "/login/Purposes",
    method: "post",
    data: {
      userName: formUser.value.userName,
      userPassword: formUser.value.userPassword,
    },
  }).then((res) => {
    if (res.data.code == 200) {
      // 存放cookies 7天
      Cookies.set("userName", formUser.value.userName, { expires: 7 });
      Cookies.set("Token", res.data.token, { expires: 7 });
      router.push("/846495F9CEED11ACCF8879F555936A7D");
      // router.push("/DemoText");
      return;
    }
    ElMessage.error({
      message: res.data.message,
      center: true,
    });
  });
};
const searykdl = () => {
  axios({
    url: "/guest/login",
    method: "post",
    data: {},
  }).then((res) => {
    if (res.data.code == 200) {
      // 存放cookies 1天
      Cookies.set("userName", 1, { expires: 1 });
      Cookies.set("Token", res.data.data, { expires: 7 });
      router.push("/846495F9CEED11ACCF8879F555936A7D");
      return;
    }
    ElMessage.error({
      message: res.data.message,
      center: true,
    });
  });
};
</script>

<style scoped>
.page-container {
  background: url("../../public/index/bak.jpg") center center fixed;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container {
  background: url("../../public/index/OIP.jpg") center center fixed;
  background-size: cover;
  padding: 20px;
  border-radius: 5%;
}

.rounded-form {
  border-radius: 10px; /* Adjust the border-radius as needed */
}

.right-align-form {
  text-align: right;
}

.centered-button {
  margin-top: 20px;
  text-align: center; /* Center the buttons horizontally */
}
</style>
